<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<title>Vue Router</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			body{
				font-size:0.8rem;
				font-family:幼圆;
			}
			div{
				width:40rem;
				min-height:20rem;
				border:0.1rem solid black;
				box-shadow:0.5rem 1rem 1rem 0.5rem #999;
				margin:1rem auto;
			}
			h2{
				font-size:1.3rem;
				min-height:3rem;
				line-height:3rem;
				text-align:center;
				background-color:#333;
				color:white;
				text-shadow:0.25rem 0.25rem 0.25rem #f60;
			}
			p{
				font-size:0.9rem;
				min-height:2rem;
				line-height:2rem;
				text-align:center;
				background-color:#666;
				color:white;
			}
			ol{
				width:20rem;
				min-height:15rem;
				margin:0.5rem auto;
				list-style-position: inside;
			}
			ol li{
				min-height:1.5rem;
				line-height:1.5rem;
			}
			a{
				color:lawngreen;
				text-decoration:none;
			}
			a:hover{
				color:#f60;
			}
			h3{
				font-size:0.8rem;
				min-height:2rem;
				line-height:2rem;
				background-color:#999;
				color:white;
				text-align:center;
			}
		</style>
		<style>
			@media (min-width:1000px){
				html{
					font-size:20px;
				}
			}
			@media  (min-width:500px) and (max-width:1000px){
				html{
					font-size:16px;
				}
			}
			@media (max-width:500px){
				html{
					font-size:14px;
				}
				div{
					margin:0;
					width:auto;
					height:auto;
				}
			}
		</style>
	</head>
	<body>
		<div>
			<h2>
				<span>Vue Router(</span>
				<a href="https://router.vuejs.org/zh/">官网</a>
				<span>)---是Vue.js官网的路由管理器</span>
			</h2>
			<p>它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发</p>
			<h3>Vue Router包含的功能</h3>
			<ol>
				<li>支持HTML5历史模式或hash模式</li>
				<li>支持嵌套路由</li>
				<li>支持路由参数</li>
				<li>支持编程式路由</li>
				<li>支持命名路由></li>
				<li>导航守卫</li>
				<li>路由元信息</li>
				<li>过度动效</li>
				<li>数据获取</li>
				<li>滚动行为</li>
				<li>路由懒加载</li>
			</ol>
		</div>
		
	</body>
</html>
